<template>
  <view class="work-container">
    <NavBar title="消息" :isShowLeft="true" @clickLeft="navigateBack">
      <view class="clear-icon" @click="clearNotice()">
        <image src="/static/images/clear.png"></image>
      </view>
    </NavBar>
    <!--   待办列表  -->
    <view v-if="listData.length > 0">
      <view class="grid-body mt-30" v-for="item in listData" :key="item.msgId" @click="handleClick(item)">
        <view class="check grid-common" :class="{ read: item.readStatus === 1 }">
          <view class="title flex">
            <view class="icon-style-wrap">
              <view v-if="item.readStatus === 0" class="dot-style"></view>
              <image class="icon-style" src="/static/images/message/tishi.png" mode="aspectFill"></image>
            </view>
            <text class="mid-title">{{ item.msgTitle }}</text>
          </view>
          <view class="date">
            {{ item.createTime }}
          </view>
          <view class="content text-grey1">
            {{ item.msgContent }}
          </view>
        </view>
      </view>
    </view>
    <view v-else>
      <Empty />
    </view>
  </view>
</template>

<script>
import Empty from '@/components/cu-empty/index.vue'
import NavBar from './components/nav-bar.vue'
import { reqMessageList, reqSetReadAllMessage, reqSetReadMessage } from '../../api/message'
export default {
  components: {
    Empty,
    NavBar
  },
  data() {
    return {
      listData: [],
      isFinished: false,
      loading: false,
      pageNum: 1,
      total: 0
    }
  },
  onLoad: function () {
    this.getList()
  },
  onPullDownRefresh() {
    this.reloadData()
  },
  onReachBottom() {
    this.getList()
  },
  methods: {
    async clearNotice() {
      reqSetReadAllMessage().then(() => {
        this.listData.map((item) => {
          item.readStatus = 1
        })
      })
    },
    handleClick(item) {
      reqSetReadMessage(item.msgId).then(() => {
        item.readStatus = 1
      })
    },
    reloadData() {
      this.pageNum = 1
      this.total = 0
      this.isFinished = false
      this.loading = false
      this.getList()
    },
    async getList() {
      if (this.isFinished || this.loading) {
        return
      }
      this.loading = true
      try {
        const { rows, total } = await reqMessageList()
        this.listData = this.pageNum === 1 ? rows : [...this.listData, ...rows]
        this.isFinished = this.listData.length >= total
        this.pageNum += 1
        uni.stopPullDownRefresh()
      } catch (e) {
        console.log(e)
      }
    },
    navigateBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.clear-icon {
  margin-top: 2px;
  image {
    width: 38rpx;
    height: 38rpx;
  }
}
.icon-style-wrap {
  position: relative;
}
.dot-style {
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 8px;
  height: 8px;
  width: 8px;
  border-radius: 8px;
  background: #ff4144;
}

.date {
  font-size: 24rpx;
  font-weight: 400;
  color: #bbbbbb;
}
.icon-style {
  width: 52rpx;
  height: 52rpx;
  margin-right: 20rpx;
}
.check {
  position: relative;
  border-right: 2px;
  .title {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10rpx;

    .mid-title {
      font-size: 32rpx;
      font-weight: 700;
      flex: 1;
    }
  }

  .content {
    width: 88%;
    padding-right: 2px;
    font-size: 28rpx;
  }

  .bor-top {
    padding-top: 20rpx;
    border-top: 1px solid #d5d7e3;
  }
  &.read {
    .title,
    .content {
      color: #999;
      font-weight: 400;
    }
  }
}
</style>
